<template>
  <el-row :gutter="20" class="mrb18 flex">
    <el-col v-for="(item, index) in totalList" :key="index"
      ><div
        class="grid-content bg-purple pd15 pointer"
        :class="item.bgClass"
        @click.stop="goUrl(item)"
      >
        <div class="flex align-center color-white mrb10">
          <i
            :class="item.icon"
            class="color-white  size65"
            style="opacity:0.7"
          ></i>
          <div class="pdl30 ">
            <div class="size16 bold">{{ item.title }}</div>
            <div class="family-cg size24" style="">
              {{ item.num }}<span class="size18 bold">{{ item.unit }}</span>
            </div>
          </div>
        </div>
        <div class="flex align-center color-white justify-between text-center">
          <div
            v-for="(children, index) in item.childList"
            :key="index"
            @click.stop="goUrl(item, children.status)"
          >
            <div class="size14 ">{{ children.name }}</div>
            <div class="family-cg size20" style="">
              {{ children.total
              }}<span class="size16">{{ children.unit }}</span>
            </div>
          </div>
        </div>
      </div></el-col
    >
  </el-row>
</template>
<script>
export default {
  props: {
    totalList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    searchData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    goUrl(item, status) {
      //   console.log("item---");
      //   console.log(item);
      if (!item.routerName) {
        return;
      }

      this.$router.push({
        name: item.routerName,
        query: {
          ...this.searchData,
          ...status
        }
      });
    }
  }
};
</script>
